Повний посібник з CSS writing-mode, що розглядає, як керувати напрямком тексту для інтернаціоналізації (i18n) та створювати візуально привабливі, глобально доступні вебсайти.
CSS writing-mode: Опановуємо напрямок тексту для глобальних вебсайтів
У сучасному взаємопов'язаному світі вебсайти повинні задовольняти потреби різноманітної аудиторії, і критичним аспектом цього є робота з різними напрямками тексту. CSS writing-mode — це потужний інструмент, який дозволяє розробникам контролювати напрямок потоку тексту, що дає змогу створювати справді інтернаціоналізовані (i18n) та візуально привабливі веб-досвіди. Цей вичерпний посібник розкриє всі тонкощі writing-mode, надаючи практичні приклади та корисні поради, які допоможуть вам опанувати керування напрямком тексту для глобальних вебсайтів.
Розуміння режимів письма
Властивість CSS writing-mode визначає, чи розташовуються рядки тексту горизонтально або вертикально, та напрямок, у якому рухаються блоки. Вона відіграє ключову роль в адаптації вебсторінок для мов, що використовують різні напрямки письма, наприклад:
- Зліва направо (LTR): англійська, іспанська, французька, німецька та багато інших західних мов.
- Справа наліво (RTL): арабська, іврит, перська та урду.
- Вертикальний: традиційна китайська, японська та монгольська.
За замовчуванням веббраузери використовують режим письма horizontal-tb, який розміщує текст горизонтально згори вниз. Однак writing-mode дозволяє змінити цю стандартну поведінку та створювати макети, які враховують різні напрямки тексту.
Значення властивості `writing-mode`
Властивість writing-mode приймає кілька значень, кожне з яких визначає різний напрямок тексту та потік блоків:
horizontal-tb: Горизонтальний згори вниз. Рядки тексту є горизонтальними і йдуть згори вниз. Це значення за замовчуванням.vertical-rl: Вертикальний справа наліво. Рядки тексту є вертикальними і йдуть справа наліво. Блоки рухаються вниз.vertical-lr: Вертикальний зліва направо. Рядки тексту є вертикальними і йдуть зліва направо. Блоки рухаються вниз.sideways-rl: Застарілий псевдонім дляvertical-rl.sideways-lr: Застарілий псевдонім дляvertical-lr.
Наступні значення також доступні, але використовуються рідше:
block-flow: Використовувати напрямок контексту блокового форматування, на який можуть впливати інші властивості.
Базові приклади
Проілюструймо використання writing-mode на кількох простих прикладах:
Горизонтальний текст (за замовчуванням)
Це поведінка за замовчуванням, тому явне вказання writing-mode не потрібне:
<p>Це горизонтальний текст.</p>
Вертикальний текст (справа наліво)
Щоб відобразити текст вертикально справа наліво, використовуйте vertical-rl:
<p style="writing-mode: vertical-rl;">Це вертикальний текст (справа наліво).</p>
Вертикальний текст (зліва направо)
Щоб відобразити текст вертикально зліва направо, використовуйте vertical-lr:
<p style="writing-mode: vertical-lr;">Це вертикальний текст (зліва направо).</p>
Практичне застосування `writing-mode`
Окрім базового керування напрямком тексту, writing-mode пропонує низку практичних застосувань для створення візуально привабливих та міжнародно доступних вебсайтів:
1. Адаптація до мов RTL
Для вебсайтів, що підтримують мови RTL, як-от арабська чи іврит, правильне відображення тексту є надзвичайно важливим. Для цього слід налаштувати напрямок тексту. Ви можете використовувати CSS-селектори, щоб застосувати direction: rtl; до певних елементів або всього документа на основі мовного атрибута:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
Хоча direction: rtl; є вирішальним для встановлення базового напрямку, вам також може знадобитися unicode-bidi: bidi-override; для забезпечення коректної обробки тексту зі змішаним напрямком. Сучасні підходи часто віддають перевагу логічним властивостям, які ми розглянемо пізніше.
2. Створення вертикальних меню навігації
writing-mode можна використовувати для створення вертикальних меню навігації, які часто зустрічаються на японських та китайських вебсайтах. Це може додати вашому сайту унікального візуального стилю:
<ul class="vertical-menu">
<li><a href="#">Головна</a></li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Послуги</a></li>
<li><a href="#">Контакти</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
У цьому прикладі text-orientation: upright; використовується для того, щоб текст всередині елементів вертикального меню відображався прямо, а не був повернутий.
3. Створення макетів у журнальному стилі
writing-mode можна використовувати для створення макетів у журнальному стилі. Наприклад, ви можете розмістити велике зображення з вертикальним текстом поверх нього, щоб створити вражаючий візуальний ефект.
<div class="magazine-section">
<img src="image.jpg" alt="Зображення з журналу">
<div class="vertical-text">Ексклюзивне інтерв'ю</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Потрібно для коректного відображення у різних браузерах */
}
Властивість transform: rotate(180deg); часто є необхідною для забезпечення узгодженого відображення у різних браузерах, особливо у старих версіях.
4. Покращення візуалізації даних
У візуалізації даних writing-mode може бути корисним для підписів осей на діаграмах та графіках, особливо коли простір обмежений. Наприклад, ви можете повернути підписи на вертикальній осі, щоб вони не накладалися один на одного.
Просунуті техніки та важливі аспекти
Щоб повною мірою використати можливості writing-mode, враховуйте ці просунуті техніки та важливі фактори:
1. Логічні властивості та значення
Сучасний CSS вводить логічні властивості та значення, які забезпечують більш гнучкий та семантичний спосіб керування розміткою та напрямком. Замість фізичних властивостей, як-от left та right, використовуються логічні властивості, як-от start та end, які адаптуються до напрямку письма. Наприклад:
margin-inline-start: Еквівалентmargin-leftу LTR таmargin-rightу RTL.padding-block-start: Еквівалентpadding-topу горизонтальних режимах письма таpadding-leftабоpadding-rightу вертикальних.
Використання логічних властивостей робить ваш CSS більш адаптивним та легким для підтримки, особливо при роботі з кількома напрямками письма.
2. Комбінування `writing-mode` з іншими властивостями CSS
writing-mode взаємодіє з іншими властивостями CSS, такими як text-orientation, direction та unicode-bidi, для контролю вигляду та поведінки тексту. Розуміння цих взаємодій є ключовим для досягнення бажаних результатів.
text-orientation: Визначає орієнтацію символів у вертикальних режимах письма. Значення включаютьupright,sideways,mixedтаuse-glyph-orientation.direction: Визначає базовий напрямок тексту (LTR або RTL).unicode-bidi: Контролює, як до елемента застосовується двонаправлений алгоритм Unicode.
3. Обробка тексту зі змішаним напрямком
При роботі з текстом, що містить символи як LTR, так і RTL (наприклад, англійський текст всередині арабського абзацу), важливо використовувати властивість unicode-bidi для забезпечення коректного відображення. Значення bidi-override часто використовується для примусового встановлення певного напрямку.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. Рекомендації щодо шрифтів
Не всі шрифти підходять для вертикального письма. Деякі шрифти можуть не містити гліфів для вертикального письма або можуть відображатися некоректно. При використанні вертикальних режимів письма обирайте шрифти, спеціально розроблені для вертикального тексту, або ті, що мають добру підтримку вертикальних гліфів.
Шрифти зі східноазійських країн (Китай, Японія, Корея), як правило, мають дуже хорошу підтримку вертикального письма.
5. Доступність
Переконайтеся, що використання writing-mode не впливає негативно на доступність. Надавайте альтернативний текст для зображень та іншого нетекстового вмісту, а також забезпечуйте, щоб текст був читабельним та зрозумілим для користувачів з обмеженими можливостями. Використовуйте семантичні елементи HTML та атрибути ARIA для покращення доступності.
6. Сумісність з браузерами
writing-mode добре підтримується сучасними браузерами, але старіші версії можуть вимагати вендорних префіксів (наприклад, -webkit-writing-mode, -ms-writing-mode). Використовуйте CSS-препроцесори, такі як Sass або Less, для автоматичного додавання вендорних префіксів, або інструменти на кшталт Autoprefixer.
Найкращі практики використання `writing-mode`
Щоб ефективно використовувати writing-mode та створювати глобально доступні вебсайти, дотримуйтесь цих найкращих практик:
- Використовуйте логічні властивості та значення, де це можливо. Це зробить ваш CSS більш адаптивним та легким для підтримки.
- Обирайте відповідні шрифти для вертикальних режимів письма. Тестуйте свої шрифти, щоб переконатися, що вони коректно відображаються у вертикальному тексті.
- Враховуйте доступність. Переконайтеся, що ваше використання
writing-modeне погіршує доступність для користувачів з обмеженими можливостями. - Тестуйте свої макети в різних браузерах та на різних пристроях. Переконайтеся, що ваші макети коректно відображаються на різних платформах.
- Використовуйте CSS-препроцесори або Autoprefixer для обробки вендорних префіксів. Це заощадить ваш час та зусилля і забезпечить сумісність вашого CSS зі старішими браузерами.
- Відокремлюйте вміст від представлення. Використовуйте CSS для керування виглядом вашого контенту та уникайте використання HTML для стилізації.
Приклади глобальних вебсайтів, що використовують `writing-mode`
Багато вебсайтів у всьому світі використовують writing-mode для різних цілей, від адаптації до мов RTL до створення візуально унікальних макетів. Ось кілька прикладів:
- Новинні сайти арабською або на івриті: Ці сайти використовують
direction: rtlта, можливо, налаштуванняwriting-modeдля коректного відображення тексту. - Сайти про японське та китайське мистецтво та культуру: Часто використовують вертикальне письмо для заголовків, меню та декоративних елементів.
- Модні журнали: Часто використовують вертикальний текст у візуальних макетах для стилістичних ефектів.
Висновок
CSS writing-mode — це потужний інструмент для створення інтернаціоналізованих та візуально привабливих вебсайтів. Розуміючи різні значення цієї властивості та її взаємодію з іншими властивостями CSS, ви можете створювати макети, які адаптуються до різних напрямків тексту та покращують користувацький досвід для глобальної аудиторії. Не забувайте враховувати доступність, сумісність з браузерами та вибір шрифтів, щоб ваші сайти були доступними та візуально привабливими для всіх користувачів.
Оскільки веб-розробка продовжує розвиватися, опанування таких технік, як writing-mode, стає все більш важливим для створення справді глобальних та інклюзивних онлайн-досвідів. Використовуйте силу інтернаціоналізації та створюйте вебсайти, які знайдуть відгук у користувачів з усіх куточків світу.